<template>
  <div class="testTracking">
    <video
      id="video"
      width="1000"
      height="700"
      preload
      autoplay
      loop
      muted
    ></video>
    <canvas id="canvas" width="1000" height="700"></canvas>
    <div class="buttonDiv">
      <button type="button" @click="submit" style="font-size: 3vw;">
        提取照片
      </button>
      <button
        type="button"
        name="button"
        @click="checkFace"
        style="font-size: 3vw;"
      >
        检测人脸
      </button>
      <button
        type="button"
        name="button"
        @click="getCompetence"
        style="font-size: 3vw;"
      >
        打开摄像头
      </button>
      <button type="button" name="button" @click="de" style="font-size: 3vw;">
        停
      </button>
    </div>
  </div>
</template>

<script>
require('tracking/build/tracking-min.js')
require('tracking/build/data/face-min.js')
require('tracking/build/data/mouth-min.js')
require('tracking/examples/assets/stats.min.js')
export default {
  name: 'testTracking',
  data () {
    return {}
  },
  methods: {
    checkFace () {
      var video = document.getElementById('video')
      var canvas = document.getElementById('canvas')
      var context = canvas.getContext('2d')

      var tracker = new tracking.ObjectTracker('face')
      tracker.setInitialScale(4)
      tracker.setStepSize(2)
      tracker.setEdgesDensity(0.1)

      this.trackerTask = tracking.track('#video', tracker, { camera: true })

      tracker.on('track', function (event) {
        if (event.data.length <= 0) {
          return
        }
        context.clearRect(0, 0, canvas.width, canvas.height)
        event.data.forEach(function (rect) {
          context.strokeStyle = '#a64ceb'
          context.strokeRect(rect.x, rect.y, rect.width, rect.height)
          context.font = '11px Helvetica'
          context.fillStyle = '#fff'
          context.fillText(
            'x: ' + rect.x + 'px',
            rect.x + rect.width + 5,
            rect.y + 11
          )
          context.fillText(
            'y: ' + rect.y + 'px',
            rect.x + rect.width + 5,
            rect.y + 22
          )
        })
      })
    },
    submit () {
      let that = this
      let canvas = document.getElementById('canvas')
      let context = canvas.getContext('2d')
      let video = document.getElementById('video')
      context.drawImage(video, 0, 0, 1000, 700)
      canvas.toBlob(blob => {
        // axios.post({ faceUrl: URL.createObjectURL(blob) }).then((res) => {
        //   console.log("上传成功");
        // });
        var reader = new FileReader()
        reader.readAsDataURL(blob)
        console.log(reader)
      })
    },
    getCompetence () {
      var _this = this
      this.thisCancas = document.getElementById('canvas')
      this.thisContext = this.thisCancas.getContext('2d')
      this.thisVideo = document.getElementById('video')
      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {}
      }
      // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
      // 使用getUserMedia，因为它会覆盖现有的属性。
      // 这里，如果缺少getUserMedia属性，就添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先获取现存的getUserMedia(如果存在)
          var getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia
          // 有些浏览器不支持，会返回错误信息
          // 保持接口一致
          if (!getUserMedia) {
            return Promise.reject(
              new Error('getUserMedia is not implemented in this browser')
            )
          }
          // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject)
          })
        }
      }
      var constraints = {
        audio: false,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
          transform: 'scaleX(-1)'
        }
      }
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function (stream) {
          // 旧的浏览器可能没有srcObject
          if ('srcObject' in _this.thisVideo) {
            _this.thisVideo.srcObject = stream
          } else {
            // 避免在新的浏览器中使用它，因为它正在被弃用。
            _this.thisVideo.src = window.URL.createObjectURL(stream)
          }
          _this.thisVideo.onloadedmetadata = function (e) {
            _this.thisVideo.play()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    de () {
      // 停止侦测
      this.trackerTask.stop()
      // 关闭摄像头
      this.trackerTask.closeCamera()
    }
  },
  destroyed () {
    // 停止侦测
    this.trackerTask.stop()
    // 关闭摄像头
    this.trackerTask.closeCamera()
  }
}
</script>

<style lang="less" scoped>
.testTracking {
  height: 100vh;
  width: 100%;
  position: relative;
  > * {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
  }
  video,
  canvas {
    top: 0;
  }
  .buttonDiv {
    bottom: 10px;
  }
}
</style>
